:root {
  --color-body-bg: #ffffff;
  --color-text: #000000;
  --bg-alpha: 10%;
  --color-secondary: #7a7a7b;
  --color-secondary-bg: #f5f5f7;
  --color-navbar-bg: rgba(255, 255, 255, 0.86);
  --color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
  --color-secondary-bg-for-transparent: rgba(180, 180, 180, 0.4);
  --html-overflow-y: overlay;
  --color-wbw-text-unplay: rgba(0, 0, 0, 0.28);
  --color-full-text-unplay: rgba(255, 255, 255, 0.48);
  --color-wbw-text: rgba(0, 0, 0, 0.75);
  --color-wbw-text-played: rgba(0, 0, 0, 0.95);
  --color-border: rgba(0, 0, 0, 0.2);
}

[data-theme='dark'] {
  --color-body-bg: #222222;
  --color-text: #ffffff;
  --bg-alpha: 15%;
  --color-secondary: #7a7a7b;
  --color-secondary-bg: #323232;
  --color-navbar-bg: rgba(34, 34, 34, 0.86);
  --color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
  --color-secondary-bg-for-transparent: rgba(255, 255, 255, 0.08);
  --color-wbw-text-unplay: rgba(255, 255, 255, 0.28);
  --color-wbw-text: rgba(255, 255, 255, 0.75);
  --color-wbw-text-played: rgba(255, 255, 255, 0.95);
  --color-border: rgba(255, 255, 255, 0.2);
}

#app,
input {
  font-family:
    'Barlow',
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Helvetica Neue,
    PingFang SC,
    Microsoft YaHei,
    Source Han Sans SC,
    Noto Sans CJK SC,
    WenQuanYi Micro Hei,
    sans-serif,
    microsoft uighur;
}
body {
  background-color: var(--color-body-bg);
  padding: 0;
  margin: 0;
}

html {
  overflow-y: var(--html-overflow-y);
  min-width: 768px;
  overscroll-behavior: none;
  scrollbar-width: none;
}

select,
button {
  font-family: inherit;
}
button {
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
}
input,
button {
  &:focus {
    outline: none;
  }
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}

[data-electron='yes'] {
  button,
  .navigation-links a,
  .playlist-info .description {
    cursor: default !important;
  }
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-left: 1px solid rgba(128, 128, 128, 0.18);
  background: var(--color-body-bg);
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(128, 128, 128, 0.38);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: var(--color-secondary-bg);
}

.user-select-none {
  user-select: none;
}
